import React from 'react'
import {useSelector,useDispatch} from "react-redux"
import { ProductCard, Tag, Button } from 'react-vant';
import { Empty } from 'react-vant';
import { DefinePlugin } from 'webpack';
import * as action from "../action"
function Shopcar() {
  let dispatch = useDispatch()
  let store = useSelector((state)=>{
      return {
          ...state.shopcarreducer
      }
  })
  let addfn = (id)=>{ // 点击加按钮的函数
      // 1.在组件中调用action中的方法
      dispatch(action.addFn(id))
  }
  let Delfn =(id)=>{
      dispatch(action.jian(id))
  }
  console.log(store);
  return (
    <div>
        {
            store.shoparr && store.shoparr.length ? store.shoparr.map((item,index)=>{
                return  <ProductCard
                num={item.num}
                key={index}
                price={item.price}
                desc={item.des}
                title={item.tit}
                thumb={item.img}
                footer={
                  <>
                    <Button size="mini" round plain style={{ marginRight: 2 }} onClick={()=>Delfn(item.id)}>
                       -
                    </Button>
                    <Button size="mini" round plain onClick={()=>addfn(item.id)}>
                       + 
                    </Button>
                  </>
                }
              />
            }): <Empty description="购物车空空" />
        }
    </div>
  )
}

export default Shopcar